<!DOCTYPE html>
<html lang="en">
<head>
  <title>Title</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="../layui-v2.9.0/layui/css/layui.css" media="all">
  <script src="../layui-v2.9.0/layui/layui.js"></script>
</head>
<body>
<div style="width: 1380px">

  <div class="layui-col-xs10 layui-col-xs-offset1">

    <ul class="layui-nav layui-bg-gray">
      <li class="layui-nav-item left-nav layui-col-xs2">
        <!-- 品牌logo位置 -->
        <div class="nav-profile">
          <!-- 图像使用div包裹，设置相对定位 -->
          <div class="nav-profile-img" style="margin-left: 20px;">
            <img class="logo_img" src="/img/热趣部落.png" style="transform: scale(1.5);" alt="加载中"/>
          </div>
          <!-- 用户名链接 -->
          <a href="/forward/indexPage" style="color: black;">热趣部落</a>
        </div>
      </li>
      <li class="layui-nav-item layui-this layui-col-xs1"><a href="/forward/indexPage">首页</a></li>
      <li class="layui-nav-item layui-col-xs1"><a href="">热点</a></li>
      <li class="layui-nav-item layui-col-xs1">
        <a href="javascript:;">模块</a>
        <dl class="layui-nav-child">
          <dd><a href="javascript:;">趣点模块</a></dd>
          <dd><a href="">动态模块</a></dd>
          <dd><a href="">个人信息模块</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item "><a href="">关于</a></li>
      <!--            个人信息接口-->
      <li class="layui-nav-item layui-col-xs2" style="float: right">
        <div class="nav-profile">
          <div class="nav-profile-img" style="margin-left: 20px;">
            <img class="layui-nav-img" src="${sessionScope.user.upictureurl}" style="transform: scale(1.5);" alt="加载中"/>
          </div>
          <!-- 用户名链接 -->
          <a href="javascript:;" style="color: black;">${sessionScope.user.uname}</a>
          <dl class="layui-nav-child" style="text-align: center">
            <dd><a href="">个人信息</a></dd>
            <dd><a href="">我的好友</a></dd>
            <dd >
              <div >
                <a href="/logout/user"> <i class="layui-icon layui-icon-logout"></i> 退出登录</a>
              </div>
            </dd>
          </dl>
        </div>
      </li>
    </ul>
  </div>

  <div class="layui-col-xs2 layui-col-xs-offset1" style="margin-top: 20px">
    <ul class="layui-nav layui-nav-tree layui-col-xs2 layui-bg-gray">
      <li class="layui-nav-item layui-this">
        <a href="javascript:;" lay-on="selectStatus">趣点职务</a>
      </li>
      <li class="layui-nav-item layui-nav-itemed">
        <a href="javascript:;" lay-on="postController">帖子管理</a>
      </li>
      <li class="layui-nav-item"><a href="javascript:;" lay-on="sendBarNotice">发布公告</a></li>
      <li class="layui-nav-item"><a href="javascript:;" lay-on="userControl">用户管理</a></li>
      <li class="layui-nav-item"><a href="javascript:;" lay-on="editBar">修改趣点信息</a></li>
      <li class="layui-nav-item"><a href="javascript:;" lay-on="upload">上传趣点图像</a></li>
    </ul>
  </div>


  <div class="layui-col-xs8" style="margin-top: 20px;margin-left: 10px">
    <div class="layui-card layui-bg-gray" id="this">

    </div>
  </div>
</div>
<script>

<!--  初始时导入html文件-->
    layui.use( function() {
      var $ = layui.jquery;
      var element = layui.element;
      var util = layui.util;

      util.on({
        selectStatus: function(){
          console.log(this); // 当前触发事件的 DOM 元素
          layer.msg('触发了事件 1');
          $.get("selectStatus.html", function (data) {
            $('#this').html(data);
          });
        },
        postController: function(){
          layer.msg('触发了事件 2');
          $.get("postController.html", function (data) {
            $('#this').html(data);
          });
        },
        sendBarNotice : function(){
          $.get("sendBarNotice.html", function (data) {
            $('#this').html(data);
          });
        },
        userControl : function(){
          $.get("userControl.html", function (data) {
            $('#this').html(data);
          });
        },
        editBar : function(){
          $.get("editBar.html", function (data) {
            $('#this').html(data);
          });
        },
        upload : function(){
          $.get("upload.html", function (data) {
            $('#this').html(data);
          });
        },



      });

      // 可替换为转发请求路径
      $.get("selectStatus.html", function (data) {
        $('#this').html(data);
      });




    });

</script>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<style>
  /* styles.css */
  .nav-profile {
    display: flex;
    align-items: center;
  }

  .nav-profile-img {
    position: relative;
    margin-right: 10px;
  }
  a{
    margin-left: 10px;
  }

  a:hover{
    text-decoration: underline;
  }
  /*标签图片*/
  .img-index{
    width: 20px;
    height: 20px;
  }
  hr{
    padding: 0;
    margin: 0;
  }
  .logo_img{
    width: 40px;
    height: 30px;
  }
  h3{
    margin-top: 0;
  }
  .layui-card-img { /* 使用新的类名或确保选择器能覆盖现有样式 */
    width: 200px; /* 假设我们想要将图片宽度设置为200px，您可以根据需要调整 */
    height: auto; /* 保持图片的高宽比 */
    border-radius: 0; /* 移除边框圆角 */
    border: none; /* 如果图片有边框，也移除它 */
    /* 可以添加其他图片样式，比如margin, padding等 */
  }
  .layui-btn-small {
    padding: 1px 10px;
    font-size: 15px;
  }
</style>

</body>
</html>